import { useEffect, useRef, useState } from 'react'
import './Home.scss'
import DisplayView from './view/DisplayView'
import ImageFrameList from './view/ImageFrameList'
import ResizeModal from './view/ResizeModal'
import RemoveBgModal from './view/RemoveBgModal'
import { sleep } from '@/utils/common'
import imageLoadManager from '@/lib/imageLoadManager'
import SettingModal from './view/SettingModal'
import GeSelectModal from './view/GeSelectModal'
import ClipModal from './view/ClipModal'
import SpriteExportModal from './view/SpriteExportModal'
import DelWatermarkModal from './view/DelWatermarkModal'
import ImageExportModal from './view/ImageExportModal'
import VideoExportModal from './view/VideoExportModal'

const Home = () => {
  const [imageList, setImageList] = useState<FrameInfo[]>([])
  const lastImageList = useRef([] as FrameInfo[])
  const [frameList, setFrameList] = useState<FrameInfo[]>([])
  const [selectList, setSelectList] = useState<string[]>([])
  const [lastHoverIndex, setLastHoverIndex] = useState<number>(-1)
  const [fps, setFps] = useState(10)
  const [reSizeModalShow, setReSizeModalShow] = useState(false)
  const [removeBgModalShow, setRemoveBgModalShow] = useState(false)
  const [clipModalShow, setClipModalShow] = useState(false)
  const [geSelectModalShow, setGeSelectModalShow] = useState(false)
  const [delWatermarkModalShow, setDelWatermarkModalShow] = useState(false)

  const [exportSpriteSheetModal, setExportSpriteSheetModal] = useState(false)
  const [exportImageSheetModal, setExporImageSheetModal] = useState(false)
  const [exportVideoModal, setExporVideoModal] = useState(false)
  const [settingModalShow, setSettingModalShow] = useState(false)

  useEffect(() => {
    setFrameList(imageList.filter((item) => selectList.includes(item.url)))
  }, [imageList, selectList])
  useEffect(() => {
    for (let item of lastImageList.current) {
      if (!imageList.some((item2) => item2.url === item.url)) {
        sleep(100).then(() => URL.revokeObjectURL(item.url))
        imageLoadManager.removeImage(item.url)
      }
    }
    lastImageList.current = imageList
  }, [imageList])
  return (
    <div className="Home">
      <ImageFrameList
        onExportSpriteSheet={() => setExportSpriteSheetModal(true)}
        onExportImageList={() => setExporImageSheetModal(true)}
        onExportVideo={() => setExporVideoModal(true)}
        frameList={frameList}
        imageList={imageList}
        setImageList={setImageList}
        onRemoveBg={() => setRemoveBgModalShow(true)}
        setLastHoverIndex={setLastHoverIndex}
        onResizeImage={() => setReSizeModalShow(true)}
        onOpenSetting={() => setSettingModalShow(true)}
        onClipImage={() => setClipModalShow(true)}
        onGeSelect={() => setGeSelectModalShow(true)}
        onDelWatermark={() => setDelWatermarkModalShow(true)}
        setSelectList={setSelectList}
        selectList={selectList}
      />
      <DisplayView
        fps={fps}
        setFps={setFps}
        frameList={frameList}
        lastHoverIndex={lastHoverIndex}
        onExportSpriteSheet={() => setExportSpriteSheetModal(true)}
        onExportImageList={() => setExporImageSheetModal(true)}
      />
      <ResizeModal
        onUpdate={(v) => {
          setReSizeModalShow(false)
          const selIndex = selectList.map((item) =>
            imageList.findIndex((item2) => item2.url === item)
          )
          setSelectList(selIndex.map((item) => v[item]?.url).filter(Boolean))
          setImageList(v)
        }}
        show={reSizeModalShow}
        onHide={() => setReSizeModalShow(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />
      <RemoveBgModal
        onUpdate={(v) => {
          setRemoveBgModalShow(false)
          const selIndex = selectList.map((item) =>
            imageList.findIndex((item2) => item2.url === item)
          )
          setSelectList(selIndex.map((item) => v[item]?.url).filter(Boolean))
          setImageList(v)
        }}
        show={removeBgModalShow}
        onHide={() => setRemoveBgModalShow(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />
      <GeSelectModal
        onUpdate={(v) => {
          setGeSelectModalShow(false)
          setSelectList(v)
        }}
        show={geSelectModalShow}
        onHide={() => setGeSelectModalShow(false)}
        allFrameList={imageList}
        fps={fps}
      />
      <ClipModal
        onUpdate={(v) => {
          setClipModalShow(false)
          const selIndex = selectList.map((item) =>
            imageList.findIndex((item2) => item2.url === item)
          )
          setSelectList(selIndex.map((item) => v[item]?.url).filter(Boolean))
          setImageList(v)
        }}
        show={clipModalShow}
        onHide={() => setClipModalShow(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />
      <DelWatermarkModal
        onUpdate={(v) => {
          setDelWatermarkModalShow(false)
          const selIndex = selectList.map((item) =>
            imageList.findIndex((item2) => item2.url === item)
          )
          setSelectList(selIndex.map((item) => v[item]?.url).filter(Boolean))
          setImageList(v)
        }}
        show={delWatermarkModalShow}
        onHide={() => setDelWatermarkModalShow(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />
      <SpriteExportModal
        show={exportSpriteSheetModal}
        onHide={() => setExportSpriteSheetModal(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />
      <ImageExportModal
        show={exportImageSheetModal}
        onHide={() => setExporImageSheetModal(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />
      <VideoExportModal
        show={exportVideoModal}
        onHide={() => setExporVideoModal(false)}
        frameList={frameList}
        allFrameList={imageList}
        fps={fps}
      />

      <SettingModal
        show={settingModalShow}
        onHide={() => setSettingModalShow(false)}
      />
    </div>
  )
}

export default Home
